ANTOOZA-FRONTEND/app/(main)/user/[sid]/_component/UserPostsList.tsx

import Link from 'next/link';
import { Eye, Heart, MessageCircle } from 'lucide-react';
import { formatDate } from '@/lib/utils/format';
import { UserPostRow, UserProfileDto } from '@/types/account/profile';

type Props = {
	list: UserPostRow[];
	author?: UserProfileDto|null;
};

export default function UserPostsList({ list, author }: Props) {
	if (list.length === 0) {
		return <p className="user-profile__empty">작성한 게시글이 없습니다.</p>;
	}

	const authorDisplay = author?.name || author?.memberSID || null;
	const avatarInitial = (authorDisplay?.charAt(0) || '?').toUpperCase();

	return (
		<ul className="user-profile__list">
			{list.map((row) => (
				<li key={row.postID} className="user-profile__list-item">
					<Link href={`/post/${row.postID}`} className="user-profile__list-link">
						<div className="user-profile__list-body">
							{author && (
								<header className="user-profile__list-author">
									{author.thumb ? (
										<img src={author.thumb} alt={authorDisplay ?? ''} className="user-profile__list-author-avatar" />
									) : (
										<span className="user-profile__list-author-avatar user-profile__list-author-avatar--fallback">{avatarInitial}</span>
									)}
									<span className="user-profile__list-author-name">{authorDisplay}</span>
									<span className="user-profile__list-author-handle">@{author.memberSID}</span>
									<span className="user-profile__list-time">· {formatDate(row.createdAt)}</span>
								</header>
							)}

							<div className="user-profile__list-meta">
								<span className="user-profile__list-board">{row.boardName}</span>
							</div>
							<p className="user-profile__list-subject">{row.subject}</p>

							{row.thumbnail && (
								<img src={row.thumbnail} alt="" className="user-profile__list-thumb" loading="lazy" />
							)}

							<div className="user-profile__list-stats">
								<span className="user-profile__list-stat" title="조회 수">
									<Eye size={14} strokeWidth={1.75} />
									{row.views.toLocaleString()}
								</span>
								<span className="user-profile__list-stat" title="좋아요">
									<Heart size={14} strokeWidth={1.75} />
									{row.likes.toLocaleString()}
								</span>
								<span className="user-profile__list-stat" title="댓글">
									<MessageCircle size={14} strokeWidth={1.75} />
									{row.comments.toLocaleString()}
								</span>
							</div>
						</div>
					</Link>
				</li>
			))}
		</ul>
	);
}